<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li,
        ol {
            list-style: none;
        }
        
        .breadcrumb {
            padding-left: 6px;
            padding-right: 6px;
        }
        
        .m-style {
            width: 700px;
            margin: 20px auto;
        }
        
        .m-style .prev {
            background: pink;
        }
        
        .m-style .next {
            background: pink;
        }
        
        .m-style .active {
            background: red;
        }
    </style>

    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/tongyong.css">
    <link rel="stylesheet" href="../css/liebiao.css">
    <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">

</head>

<body>
    <h1>欢迎来到商品页面</h1>
    <div class="pagi"></div>
    <div class="container">
        <ul>

        </ul>
    </div>
    <div class="box m-style"></div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../tools//jquery-pagination//jquery.pagination.js"></script>
    <script>
        //默认显示第一页
        let page = 1;
        //默认每页显示8条数据
        let line = 8
            //获取浏览器地址数据对象
        let obj = myGetUrlValObj();
        console.log(obj);
        //调用函数，生成页面内容为第一页的内容
        set();
        //创建一个函数，动态生成页面
        function set() {
            //向后端发送请求
            const xhr = myPromiseJQueryAjax('../server/goods_list.php', 'get', {
                cat_one_id: obj.cat_one_id,
                page: page,
                line: line
            }, 'json');
            xhr.then(function(res) {
                console.log(res)
                    //根据响应体动态生成页面
                let str = '';
                res.data.forEach(function(item) {
                        str += `
                    <li class="list-item">
                <div class="panel panel-primary">
                    <div class="panel-body">
                        <ol class="breadcrumb">
                            <li><a href="#">${item.cat_one_id}</a></li>
                            <li><a href="#">${item.cat_two_id}</a></li>
                            <li class="active">${item.cat_three_id}</li>
                        </ol>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="">
                                <div class="thumbnail">
                                    <img src="${item.goods_big_logo}" alt="...">
                                    <div class="caption">
                                        <h3>${item.goods_name}</h3>
                                        <p>
                                            <i class="glyphicon glyphicon-yen"></i>
                                            <span>${item.goods_price}</span>
                                        </p>
                                        <p><a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> <a href="./xiangqingye.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
                    `;
                    })
                    //写入ul标签中，动态生成
                $('.container ul').html(str)
                    //
                    //
                    //使用插件，将分页插件程序直接定义在响应体程序中
                    //分页插件功能
                $('.box').pagination({
                    pageCount: res.sumPage, //总页数
                    totalData: res.row, //数据总数量
                    current: res.page, //当前在第几页
                    showData: res.line, //每页的数据数量
                    prevCls: 'prev', //上一页的类名class，写在html里，style里面
                    nextCls: 'next', //下一页的类名class，写在html里，style里面
                    prevContent: '上一页', //上一页节点里的内容
                    nextContent: '下一页', //下一页节点里的内容
                    activeCls: 'active', //选中页class类名 写在html style里
                    mode: 'fixed', //显示分页按钮为固定模式
                    count: 4, //分页按钮显示的数量，不算被选中的，也就是设定4页一共显示5个按钮
                    coping: true, //显示首页，尾页
                    homePage: '首页', //设定首页样式内容
                    endPage: '末页', //设定尾页样式内容
                    isHide: true, //总页数为0 或者是1时，隐藏分页控件
                    keepShowPN: true, //显示上一页和下一页
                    jump: true, //开启跳转页面
                    callback: function(result) {
                        //执行的回调函数，必须要有一个参数
                        //参数.grtCurrent()获取分页插件，点击之后对应的页数
                        console.log(result.getCurrent());
                        //将结果赋值给page变量存储
                        page = result.getCurrent();
                        //根据新的page数据再次发送请求，动态生成新的页面
                        set()
                    }
                })
            })
        }
        //
    </script>
</body>

</html>